<template>
    <view class="pages">
        <view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
        <view class="app-header">
            <view class="header-content">
                <image src="/static/images/logo.png" mode="aspectFit" class="app-logo"></image>
                <view class="app-title">{{appConfig.platform_name||'商家平台名称'}}</view>
            </view>
        </view>
        
        <view class="login-container">
            <view class="welcome-section">
                <view class="welcome-title">欢迎登录</view>
                <view class="welcome-subtitle">商家门店管理系统</view>
            </view>
            
            <view class="login-form">
                <view class="input-container">
                    <view class="input-icon">
                        <text class="icon account"></text>
                    </view>
                    <view class="input-field">
                        <u-field label-width="0" clear-size="38" v-model="account" placeholder="请输入账号"
                            :input-border="false" />
                    </view>
                </view>
                
                <view class="input-container">
                    <view class="input-icon">
                        <text class="icon lock"></text>
                    </view>
                    <view class="input-field">
                        <u-field label-width="0" @right-icon-click="showPassword" :right-icon="isPassword?'eye':'eye-fill'" :password="isPassword" v-model="password" placeholder="请输入密码"
                            :input-border="false" />
                    </view>
                </view>

                <view class="agreement-container">
                    <u-checkbox activeColor="#FF6B6B" v-model="checked" shape="circle">
                        <text class="agreement-text">已阅读并同意</text>
                    </u-checkbox>
                    <router-link to="/bundle/pages/server_explan/server_explan?type=2">
                        <view class="agreement">《隐私协议》</view>
                    </router-link>
                </view>

                <button class="login-btn" @tap="loginFun">
                    <text class="btn-text">登录</text>
                </button>
                
                <view class="help-text">遇到问题？<text class="contact-text">联系客服</text></view>
            </view>
            
            <view class="bottom-decor">
                <view class="decor-circle circle1"></view>
                <view class="decor-circle circle2"></view>
                <view class="decor-circle circle3"></view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        mapMutations,
        mapActions,
        mapGetters
    } from 'vuex'
    import {
        apiAuthLogin,
        apiAccountLogin,
        apiLoginCaptcha
    } from '@/api/app';
    import wechath5 from '@/utils/wechath5'
    import {
        isWeixinClient,
        currentPage,
        client,
        trottle
    } from '@/utils/tools'
    import Cache from "@/utils/cache"
    import {
        BACK_URL,
        INVITE_CODE
    } from '@/config/cachekey'
    import {
        getWxCode,
        getUserProfile
    } from '@/utils/login'
    import store from 'store'
    export default {
        data() {
            return {
                password: '',
                account: '',
                checked: false,
                isPassword: true,
                statusBarHeight: 20,
                client: store.getters.client //1-微信小程序 2-微信公众号 3-安卓app 4-苹果app 5-pc端 6-h5
            };
        },

        methods: {
            ...mapMutations(['login']),
            ...mapActions(['getUser']),

            // 账号登录
            async loginFun() {
                const {
                    account,
                    password,
                    checked
                } = this
                if (!checked) return this.$toast({
                    title: '请阅读并同意隐私协议'
                })
                
                if (!account) return this.$toast({
                    title: '请输入账号'
                })

                if (!password) return this.$toast({
                    title: '请输入密码'
                })

                apiAccountLogin({
                    account,
                    client: this.client,
                    password: password
                }).then(res => {
                    this.loginHandle(res)
                })
            },
            // 登录结果处理
            async loginHandle(data) {
                this.login(data)
                this.getUser()
                uni.hideLoading()
                uni.reLaunch({
                    url: '/pages/index/index'
                })
            },
            
            showPassword() {
                this.isPassword = !this.isPassword
            },
            
            // 获取状态栏高度
            getStatusBarHeight() {
                // #ifdef APP-PLUS
                this.statusBarHeight = plus.navigator.getStatusbarHeight();
                // #endif
                
                // #ifdef MP
                const systemInfo = uni.getSystemInfoSync();
                this.statusBarHeight = systemInfo.statusBarHeight;
                // #endif
            }
        },

        onLoad() {
            const account = Cache.get('account')
            if(account) this.account = account
            
            this.getStatusBarHeight();
            this.getCodeUrl = trottle(this.getCodeUrl)
        },
        onUnload() {

        },
    };
</script>
<style lang="scss">
    page {
        background-color: #FFFFFF;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    
    .status-bar {
        width: 100%;
        background-color: #FFFFFF;
    }
    
    .app-header {
        height: 110rpx;
        background-color: #FFFFFF;
        display: flex;
        align-items: center;
        padding: 0 40rpx;
        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03);
        position: relative;
        z-index: 10;
        
        .header-content {
            display: flex;
            align-items: center;
        }
        
        .app-logo {
            width: 124rpx;
            height: 110rpx;
            margin-right: 20rpx;
        }
        
        .app-title {
            font-size: 36rpx;
            color: #333333;
            font-weight: 600;
        }
    }

    .login-container {
        min-height: calc(100vh - 110rpx);
        padding: 60rpx 50rpx;
        background-color: #FFFFFF;
        position: relative;
        overflow: hidden;
        
        .welcome-section {
            margin-bottom: 80rpx;
            
            .welcome-title {
                font-size: 60rpx;
                font-weight: 700;
                color: #333333;
                margin-bottom: 16rpx;
                letter-spacing: 2rpx;
            }
            
            .welcome-subtitle {
                font-size: 30rpx;
                color: #999999;
                letter-spacing: 1rpx;
            }
        }
        
        .login-form {
            position: relative;
            z-index: 2;
            
            .input-container {
                margin-bottom: 40rpx;
                height: 110rpx;
                background-color: #F8F8F8;
                border-radius: 16rpx;
                display: flex;
                align-items: center;
                overflow: hidden;
                
                .input-icon {
                    width: 110rpx;
                    height: 110rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    
                    .icon {
                        width: 40rpx;
                        height: 40rpx;
                        background-size: contain;
                        background-repeat: no-repeat;
                        background-position: center;
                    }
                    
                    .account {
                        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999999"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
                    }
                    
                    .lock {
                        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999999"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>');
                    }
                }
                
                .input-field {
                    flex: 1;
                    height: 100%;
                }
            }
            
            .agreement-container {
                display: flex;
                align-items: center;
                margin: 50rpx 0;
                
                .agreement-text {
                    font-size: 28rpx;
                    color: #999999;
                }
                
                .agreement {
                    color: #FF6B6B;
                    font-size: 28rpx;
                    margin-left: 6rpx;
                }
            }
            
            .login-btn {
                height: 110rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(45deg, #FF6B6B 0%, #FF4B2B 100%);
                border-radius: 16rpx;
                margin-bottom: 50rpx;
                box-shadow: 0 8rpx 20rpx rgba(255, 107, 107, 0.3);
                border: none;
                position: relative;
                overflow: hidden;
                
                .btn-text {
                    color: #FFFFFF;
                    font-size: 34rpx;
                    font-weight: 500;
                    letter-spacing: 4rpx;
                }
                
                &:active {
                    transform: scale(0.98);
                    box-shadow: 0 4rpx 10rpx rgba(255, 107, 107, 0.2);
                }
            }
            
            .help-text {
                text-align: center;
                font-size: 28rpx;
                color: #999999;
                
                .contact-text {
                    color: #FF6B6B;
                    font-weight: 500;
                    margin-left: 6rpx;
                }
            }
        }
        
        .bottom-decor {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 300rpx;
            z-index: 1;
            overflow: hidden;
            
            .decor-circle {
                position: absolute;
                border-radius: 50%;
                
                &.circle1 {
                    width: 500rpx;
                    height: 500rpx;
                    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(255, 75, 43, 0.05) 100%);
                    bottom: -350rpx;
                    right: -150rpx;
                }
                
                &.circle2 {
                    width: 300rpx;
                    height: 300rpx;
                    background: linear-gradient(135deg, rgba(255, 107, 107, 0.08) 0%, rgba(255, 75, 43, 0.04) 100%);
                    bottom: -150rpx;
                    left: -100rpx;
                }
                
                &.circle3 {
                    width: 200rpx;
                    height: 200rpx;
                    background: linear-gradient(135deg, rgba(255, 107, 107, 0.05) 0%, rgba(255, 75, 43, 0.02) 100%);
                    bottom: 50rpx;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }
    
    /* 自定义表单元素样式 */
    .u-field__input {
        color: #333333;
        font-size: 32rpx;
        height: 110rpx;
        line-height: 110rpx;
    }
    
    .u-field__body {
        height: 110rpx;
        align-items: center;
    }
    
    .u-field__body__right-icon {
        color: #999999;
        margin-right: 24rpx;
    }
    
    .u-field__body__right-icon--select {
        transform: scale(1.2);
    }
    
    .u-checkbox__icon-wrap {
        width: 36rpx;
        height: 36rpx;
        border-color: #DDDDDD;
        background-color: #F8F8F8;
        
        &.is-checked {
            background-color: #FF6B6B !important;
            border-color: #FF6B6B !important;
        }
    }
</style>
